<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap{
            width: 900px;
            height: 500px;
            background: #ccc;
        }
        .box1{
            width: 300px;
            height: 300px;
            background: green;
            float: left
        }
        .box2{
            width: 250px;
            height: 250px;
            background: red;
            float: left;
        }
        .box3{
            width: 400px;
            height: 300px;
            background-color: blueviolet;
            float: left;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box1">2011女生的梦</div>
        <div class="box2">郝刚不要看小视频了</div>
        <div class="box3"></div>
        1234567890-
    </div>
</body>
</html>
<!-- 
    浮动属性的使用
        属性:float 使...漂浮
        属性值: left right none(默认值，正常的网页布局)
            - 浮动只能规定元素在水平方向上移动
            - 给元素添加了浮动，会使元素脱离文档流，初始位置不存在，会破坏正常的网页布局
            - 浮动元素碰到包含框(父级元素)就会停止浮动
            - 浮动元素碰到你前面一个含有浮动元素的盒子也会停止浮动
            - 当包含框放不下所有浮动元素的时候，最后一个浮动元素会往下移动,直到找到合适能放下的位置就停止浮动
 -->